<script>
import AMapLoader from "@amap/amap-jsapi-loader"
import axios from "axios";
import EditMyPlan from "@/components/EditMyPlan.vue";
export default {
  name: "ThreePage",
  components: {EditMyPlan},


  data() {
    return {
      tmpList:[
        'aaa',
        'bbb'
      ],
      //账号
      phoneNum:'',
      //计划
      selectedPlanId:0,
      planList:[
        {
          planId:0,
          targetName:'',
          targetLat:'',
          targetLng:'',
          targetAddress:'',
          targetType:''
        }
      ],
      //ai
      aiQues:'',
      aiDetail:'欢迎使用小客ai助手',
      //当前图片下标
      photoIndex:0,
      //当前目标点详情
      targetDetail: {
        name:'请选择你的兴趣点',
        cityname:'未选择',
        adname:'未选择',
        address:'未选择',
        location:{
          lat:30.536334,
          lng:114.364339
        },
        photos:[
          {
            title:'',
            url:''
          }
        ],
        rating:'请先选择',
        tel:'请先选择',
        type:'请先选择'
      },
    };
  },
  mounted() {
    this.$EventBus.$on('initPlanList',(e)=>{
      const result = JSON.parse(JSON.stringify(e));
      this.planList = result.planList;
    })
    this.$EventBus.$on('refreshDetail',(e)=>{
      const result = JSON.parse(JSON.stringify(e));
      this.refreshDetail(result.cityName, result.targetName);
    })
  },
  unmounted(){
    this.map?.destory();
  },
  methods: {
    handleSelectChange(value){
      this.selectedPlan = value;
    },
    //获取该城市该地点的详情和ai介绍
    refreshDetail(cityName, keyName) {
      this.askAi("请帮我介绍位于"+cityName+"的"+keyName)
      let that = this;
      AMapLoader.load({
        key: "dd2617cca23d86965b37a281144bfa49", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
          .then((AMap) => {
            AMap.plugin(["AMap.PlaceSearch"], function() {
              var keywords = keyName;
              var autoOptions = {
                city: cityName,
                extensions: 'all',
              }
              var placeSearch = new AMap.PlaceSearch(autoOptions);
              placeSearch.search(keywords,
                  function (status, result){
                    console.log(result)
                    if (status === 'complete'){
                      that.targetDetail = result.poiList.pois[0];
                      console.log(that.targetDetail)
                    }
                  }
              )
            });
          }).catch((e) => {
        console.log(e)
      })
    },
    //切换图片
    lastPhotoFuc(){
      if (this.photoIndex > 0){
        this.photoIndex -= 1;
      }else{
        this.photoIndex = this.targetDetail.photos.length-1;
      }
    },
    nextPhotoFuc(){
      if (this.photoIndex < this.targetDetail.photos.length-1){
        this.photoIndex += 1;
      }else{
        this.photoIndex = 0;
      }
    },
    //调取ai助手
    askAiBefore(){
      if (this.aiQues === null || this.aiQues.length < 1){
        this.aiDetail = "问题不能为空"
      }else {
        this.askAi(this.aiQues)
        this.aiQues = ''
      }
    },
    askAi(ques){
      this.aiDetail = '小客思考中，请稍等...';
      const url = 'https://oa.api2d.net/v1/chat/completions';
      axios.post(url,{
        "model": "gpt-3.5-turbo",
        "messages": [
          {
            "role": "user",
            "content": ques
          }
        ],
        "safe_mode": false
      },{
        headers:{
          'Content-Type':'application/json',
          'Authorization':'Bearer fk209457-KcOAWSG8IpC0g3u54hAyxPRJ89ElG0xx'
        }
      }).then(response =>{
        this.aiDetail = response.data.choices[0].message.content;
      }).catch(err => {
        this.aiDetail = '发生错误：'+ err;
      })
    },
    showMyPlan(){
      this.$refs.editMyPlan.showSelf(this.planList);
    },
    wantToGo(){
      this.$message({
        message:'添加成功',
        type:"success"
      })
      try {
        window.bound.setTarget({
          planId:this.planList[this.selectedPlanId].planId,
          targetName:this.targetDetail.name,
          targetLat:this.targetDetail.location.lat,
          targetLng:this.targetDetail.location.lng,
          targetAddress:this.targetDetail.address,
          targetType:this.targetDetail.type
        })
      }catch (e){
        this.aiDetail = e;
      }

    }
  },

}
</script>

<template>
  <div class="all-container">
    <!--图片，名称-->
    <div class="photo-container">
      <button @click="lastPhotoFuc" class="last-img-btn"><img class="btn-img" src="@/assets/left.png"></button>
      <div class="img-container">
        <img :src="targetDetail.photos[photoIndex].url">
        <div v-if="targetDetail.photos[photoIndex].url.length<1 || targetDetail.photos[photoIndex].url === null" class="un-chosen-show">请先选择兴趣点</div>
      </div>
      <button @click="nextPhotoFuc" class="next-img-btn"><img class="btn-img" src="@/assets/right.png"></button>
      <div class="photo-title">{{targetDetail.name}}</div>
      <div class="photo-rating">- 高德评分：{{targetDetail.rating}} -</div>
    </div>
    <!--gpt详情-->
    <div class="detail-container">
      <div class="detail-answer">{{aiDetail}}</div>
      <input v-model="aiQues" class="detail-input" placeholder="想进一步了解这里？问问ai助手吧！" type="text">
      <button @click="askAiBefore" class="detail-btn"><img src="@/assets/boat.png"></button>
    </div>
    <!--杂项和按钮-->
    <div class="btn-container">
      <div class="other-container">
        <div style="margin-bottom: 4px; white-space: nowrap; overflow-x: scroll"><strong>类型：</strong> {{targetDetail.type}}</div>
        <div style="margin-bottom: 4px;white-space: nowrap; overflow-x: scroll"><strong>城市：</strong> {{targetDetail.cityname}}</div>
        <div style="margin-bottom: 4px;white-space: nowrap; overflow-x: scroll"><strong>城区：</strong> {{targetDetail.adname}}</div>
        <div style="margin-bottom: 4px;white-space: nowrap; overflow-x: scroll"><strong>地址：</strong> {{targetDetail.address}}</div>
        <div style="margin-bottom: 4px;white-space: nowrap; overflow-x: scroll"><strong>电话：</strong> {{targetDetail.tel}}</div>
      </div>
      <div class="select-container">
        <div><strong>计划：</strong> </div>
        <el-select size="small" v-model="selectedPlanId" style="width: calc(100% - 40px)" :placeholder="planList[selectedPlanId]?.planName">
          <el-option
              v-for="(item, index) in planList"
              :key="index"
              :label="item.planName"
              :value="planList.indexOf(item)"/>
        </el-select>
      </div>
      <div class="btns-container">
        <button class="choose-btn" @click="showMyPlan">我的计划</button>
        <button class="choose-btn" @click="wantToGo">想去</button>
      </div>
    </div>
    <EditMyPlan ref="editMyPlan"/>
  </div>
</template>

<style scoped>
.photo-container{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38%;
}
.last-img-btn{
  position: absolute;
  left: 0;
  top: 10px;
  bottom:80px;
  width: 40px;
  background-color: transparent;
  border: none;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
}
.next-img-btn{
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 80px;
  width: 40px;
  background-color: transparent;
  border: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.btn-img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.img-container{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  bottom: 80px;
  width: calc(100% - 90px);
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  background-color: #97c0ee88;
}
.img-container img{
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.un-chosen-show{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
}
.photo-title{
  position: absolute;
  bottom: 34px;
  left: 10px;
  height: 40px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  letter-spacing: 2px;
}
.photo-rating{
  position: absolute;
  bottom: 16px;
  height: 20px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.detail-container{
  position: absolute;
  left: 40%;
  top: 10px;
  bottom: 10px;
  right: 20%;
}
.detail-answer{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 60px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
  padding: 4px 8px;
  overflow-y: scroll;
  letter-spacing: 1px;
  white-space: pre-line;
}
.detail-input{
  position: absolute;
  left: 0;
  bottom: 2px;
  padding: 4px 8px;
  height: 36px;
  right: 0;
  font-size: 16px;
  border: none;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
  border-radius: 4px;
  outline: none;
}
.detail-btn{
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 32px;
  width: 50px;
  border: none;
  letter-spacing: 1px;
  cursor: pointer;
  background-color: #97c0ee;
  border-radius: 8px;
  transition: 1s;
}
.detail-btn:hover{
  background-color: #6d7ad2;
}
.detail-btn img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
}

.btn-container{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18%;
  top: 10px;
}
.other-container{
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.btns-container{
  position: absolute;
  bottom: 16px;
  height: 28px;
  right: 10px;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.choose-btn{
  padding: 4px 12px;
  border: none;
  box-shadow: 0 2px 6px #43577a44;
  background-color: #97c0ee;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 1s, background-color 1s, transform 1s;
}
.choose-btn:hover{
  background-color: #6d7ad2;
  box-shadow: 2px 2px 12px #43577a;
}
.select-container{
  position: absolute;
  right: 10px;
  bottom: 56px;
  white-space: nowrap;
  left: 0;
  height: 40px;
  align-items: center;
  display: flex;
}
</style>